<template>
	<view class="jk-divider">
        <view class="jk-divider-text">
            <slot></slot>
        </view>
    </view>
</template>

<script>
	export default {
        name: 'Divider',
        props: {
            precent: {
                type: Number,
                default: 0
            },
            status: {
                type: String,
                default: 'default',
                validator(value){
                    return ['default', 'primary', 'success', 'warning', 'error'].includes(value)
                }
            },
            color: {
                type: [String, Function],
            }
        },
		data() {
			return {
				
			};
		},
        methods: {
            
        },
        computed: {
            getPrecent(){
                return {
                    width: this.precent+'%'
                }
            },
            getColor(){
                if(this.color){
                    return {
                        background: this.color
                    }
                }else{
                    return {}
                }
            }
        }
	}
</script>

<style lang="scss">
.jk-divider{
    display: block;
    height: 1px;
    width: 100%;
    margin: 40upx 0;
    background-color: #dcdfe6;
    position: relative;
    &-text{
        position: absolute;
        background-color: #fff;
        padding: 0 20px;
        font-weight: 500;
        color: #303133;
        font-size: 14px;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}
</style>
